﻿<!DOCTYPE html>
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>Foodeasy</title>

	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/foundation.css" />
	<link rel="stylesheet" href="general.css" />
	<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>

<div class="wrapper topbar">
		<div class="row topbar">
	<div class="columns large-12">
		<nav class="top-bar">
		<ul class="title-area">		
			<li class="name">
			  <a href="#" class="group-title"><img class="top-logo" src="img/logo-text.png" /></a>
			</li>
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>
		<section class="top-bar-section"> 
			<ul class="left">
				<li class="has-form" id="top-search-box">
					<form>
						<div class="row collapse small-top">
							<div class="small-12 large-12 columns">
								<input placeholder="tìm món gì vậy bạn ơi ^_^" required type="text">
								<button></button>
							</div>
						</div>
					</form>
				</li>
				<li class="divider"></li>
			</ul>		
			<ul class="right">
				<li>
					<div class="right row small-top">
						<div class="login-status">
							<ul class="inline right ">
								<li><a class="tiny-avatar" href="profile.html"><img src="img/item-1.jpg" />Cá nhân</a></li>
								<!--<li><a class="cart" href="profile.html"><img src="img/icon/cart-back.png" />Giở hàng :(</a></li>-->
								<li><a class="log out" href="profile.html"><img src="img/icon/logoff.png" />Đăng xuất</a></li>
							</ul>
						</div>
						
						
					</div>        
				</li>
				<li class="divider"></li>     
			</ul>
		</section>
	</nav>
		
	</div>
</div>
<img class="img-topbar" src="img/pink_dot_bg.gif"></img>
</div>
   
	<div class="row">
	 
		<div class="large-12 columns logo index">
			<div class="divcenter" id="search-res">
			
				<img class="logo-image" src="img/logo-image.png" />
				<form class="searchForm" action="list-restaurant.html">	
					<div>
						<select class="left">
							<option>Quan 1</option>
							<option>Quan 2</option>
						</select>
						<button class="left" ></button>
					</div>
					
				</form>
				
			</div>
			
			
		</div>
	</div>
	<div class=""row>
		<div class="large-12 columns text-logo">Hôm nay bạn muốn ăn gì?</div>
	</div>
	<div class="row">
		<div class="large-12 columns">
		
		<ul class="nav-menu right inline">
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
				<li><a href="#"></a></li>
			</ul>
			
				<!--<ul class="left inline topleft-menu">
					<li class="menu-text active">Những món ăn nổi bật</li>
					<li class="corner active"> <div></div></li>
					<li class="menu-text"><a href="#">Xem nhà hàng</a></li>
					<li class="corner"> <div></div></li>
				</ul>-->
			
		</div>
	</div>

	
	<div class="wrapper main-wrap">
	<div class="row main">
		<div class="line"></div>
		<div class="columns large-3"></div>
		<div id="tiled-item" class="columns large-9">
			<div class="item">
				<img src="img/item-1.jpg" />
				<div class="info">
					<div class="name">Luu diec phi</div>
					<div class="price">10000d</div>
					<div class="restaurant">Shanghai</div>
				</div>
			</div>
			<div class="item">
				<img src="img/item-2.jpg" />
				<div class="info">
					<div class="name">Luu diec phi</div>
					<div class="price">10000d</div>
					<div class="restaurant">Shanghai</div>
				</div>
			</div>
			<div class="item">
				<img src="img/item-3.jpg" />
				<div class="info">
					<div class="name">Luu diec phi</div>
					<div class="price">10000d</div>
					<div class="restaurant">Shanghai</div>
				</div>
			</div>
			
			
		</div>
	</div>
	<div class="row main">
		<div class="line"></div>
		<div class="columns large-3"></div>
		<div id="tiled-item" class="columns large-9">
			<div class="item">
				<img src="img/item-1.jpg" />
				<div class="info">
					<div class="name">Luu diec phi</div>
					<div class="price">10000d</div>
					<div class="restaurant">Shanghai</div>
				</div>
			</div>
			<div class="item">
				<img src="img/item-2.jpg" />
				<div class="info">
					<div class="name">Luu diec phi</div>
					<div class="price">10000d</div>
					<div class="restaurant">Shanghai</div>
				</div>
			</div>
			<div class="item">
				<img src="img/item-3.jpg" />
				<div class="info">
					<div class="name">Luu diec phi</div>
					<div class="price">10000d</div>
					<div class="restaurant">Shanghai</div>
				</div>
			</div>
			
			
		</div>
	</div>
	<div class="row main">
	<div class="line"></div>
		<div class="columns large-3"></div>
		<div class="columns large-9"></div>
	</div>

	</div>
	
	<footer>
		<div class="row footer">
			<div class="img-footer"></div>
			<div class="columns large-4 content-footer">
				Loan 
			</div>
			<div class="columns large-4 content-footer">
				L 34123412
			</div>
			<div class="columns large-4 content-footer">
				L 23413412
			</div>
		</div>
	</footer>
	
  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  
  <script src="js/foundation.min.js"></script>
  <!--
  
  <script src="js/foundation/foundation.js"></script>
  
  <script src="js/foundation/foundation.alerts.js"></script>
  
  <script src="js/foundation/foundation.clearing.js"></script>
  
  <script src="js/foundation/foundation.cookie.js"></script>
  
  <script src="js/foundation/foundation.dropdown.js"></script>
  
  <script src="js/foundation/foundation.forms.js"></script>
  
  <script src="js/foundation/foundation.joyride.js"></script>
  
  <script src="js/foundation/foundation.magellan.js"></script>
  
  <script src="js/foundation/foundation.orbit.js"></script>
  
  <script src="js/foundation/foundation.placeholder.js"></script>
  
  <script src="js/foundation/foundation.reveal.js"></script>
  
  <script src="js/foundation/foundation.section.js"></script>
  
  <script src="js/foundation/foundation.tooltips.js"></script>
  
  <script src="js/foundation/foundation.topbar.js"></script>
  
  -->
  
  <script>
    $(document).foundation();
  </script>
  
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery.wookmark.js"></script>
  <script src="js/jquery.imagesloaded.js"></script>
  
  <script type="text/javascript">
    $(document).ready(new function () {
        // Prepare layout options.
        var options = {
            autoResize: true, // This will auto-update the layout when the browser window is resized.
            container: $('#tiled-item'), // Optional, used for some extra CSS styling
            offset: 10, // Optional, the distance between grid items
            itemWidth: 220 // Optional, the width of a grid item
        };

        // Get a reference to your grid items.
        var handler = $('#tiled-item div.item');

        // Call the layout function.
        handler.wookmark(options);

       
    });
  </script>
  
</body>
</html>
